//评论组件
import React from "react";
import { useState } from "react";
import { MessageInput } from "./index";
import * as Action from "../../common/Action"
/**
 * 评论组件
 * @param {Boolean} allowReply 是否允许回复 
 */
type MessageData=
    {
        messageID:string
        to:string,//MessageID
        fromUser:string,//fromUseName
        toUser:string,//toUseName
        messageTime:string,
        messageContent:string,
        children:any[]
    }

export function Message({
    messageData,
    allowReply=true,
    updateMessage=()=>{},
    parentMessage=null,
    getMoreMessage=()=>{},
    style={}}:
    {messageData:MessageData,
        allowReply:boolean,
        parentMessage:null | string,
        updateMessage:Function,
        getMoreMessage:Function,
        style:any}){
    let inputing=false
    type DataType={
        inputTarget:string|null,
        toUser:string|null,
        showMoreButton:boolean,
        replayTargetId:string | null,
        latestMessageNum:number,
    }
    let [myFormData,setData]:[DataType,Function]=useState({
        inputTarget:null,

        toUser:"",
        replayTargetId:'',
        showMoreButton:false,
        latestMessageNum:0,
    })
    //let needShow=messageData['children'].length!=myFormData.latestMessageNum
    //if(needShow!==myFormData.showMoreButton){
    //    setData({
    //        ...myFormData,
    //        showMoreButton:needShow,
    //        latestMessageNum:messageData['children'].length
    //    })
    //}
    function startReply(target){
        if(target=='main'){
            setData({
                ...myFormData,
                toUser:messageData.fromUser,//回复对象
                inputTarget:messageData.messageID==myFormData.inputTarget?null:messageData.messageID,
                replayTargetId:messageData.messageID
            })
            return
        }
        setData({
            ...myFormData,
            toUser:target.fromUser,
            inputTarget:target.messageID==myFormData.inputTarget?null:target.messageID,
            replayTargetId:target.messageID
        })
    }
    function submitInput(text,user){
        updateMessage([
            ...messageData['children'],
            {
                messageID:Math.random().toString(32).slice(2,10),//messageID
                to:myFormData.replayTargetId,//MessageID
                fromUser:user,//fromUseName
                toUser:myFormData.toUser,//toUseName
                messageTime:'2023年9月23日',
                messageContent:text
            }
        ],parentMessage)
        setData({
            ...myFormData,
            inputTarget:null
        })
        
    }
    return (
        <div style={{width:'100%',height:'auto'}}>
            <div className="messageContainer" id={messageData.messageID}>
                <div className="messageAvatar">{messageData.fromUser[0].toUpperCase()}</div>
                <div className="messageContent">
                    <div className="messageTitle">{messageData.fromUser}</div>
                    <div className="messageTime">2023年9月12号</div>
                    <div className={`messageText ${allowReply?'messageText_scroll':'messageText_hidden'}`}>{messageData.messageContent}</div>
                    {allowReply?<div className="messageReplayButton"
                    style={
                        {
                            backgroundColor:myFormData.inputTarget==messageData.messageID?'#6254b2':'#23b7e5'
                        }
                    } 
                    onClick={()=>{startReply('main')}}>
                        {myFormData.inputTarget==messageData.messageID?'取消回复':'回复'}
                    </div>:null}
                </div>
            </div>
            {myFormData.inputTarget==messageData.messageID?<MessageInput style={style} submitMessage={submitInput}></MessageInput>:null}
            {/**子级评论 */}
            {
                allowReply
                ?
                (messageData.children || []).map(node=>
                    <div className="messageChild" id={node.messageID}>
                        <div className="messageAvatar" >{node.fromUser[0]}</div>
                        <div className="messageContent">
                            <div className="messageTitle" style={{display:'flex'}}>
                                <div style={{width:'auto',marginRight:"16px"}}>{node.fromUser}</div>
                                <div style={{width:'auto',marginRight:"16px",whiteSpace:'nowrap'}}>回复</div>
                                <a className="messageToUser" href={'#'+node.to}>@{node.toUser}</a>
                            </div>
                            <div className="messageTime">{node.messageTime}</div>
                            <div  className={`messageText ${allowReply?'messageText_scroll':'messageText_hidden'}`}>
                                {node.messageContent}
                            </div>
                            {allowReply?
                                <div className="messageReplayButton" 
                                    style={
                                        {
                                            backgroundColor:myFormData.inputTarget==node.messageID?'#6254b2':'#23b7e5'
                                        }
                                    } 
                                    onClick={()=>{startReply(node)}}>
                                    {myFormData.inputTarget==node.messageID?'取消回复':'回复'}
                                </div>:null
                            }
                            {myFormData.inputTarget==node.messageID?<MessageInput style={style} submitMessage={submitInput}></MessageInput>:null}
                        </div>
                    </div>
                )
                :null
            }
            {/**加载更多按钮 */}
            {/*
                allowReply?<div className="moreMessageButton" onClick={moreMessage}>加载更多</div>:null*/}
        </div>
        
    )
}